<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="model.GruppenRepository"%>
<%@page import="model.Benutzer"%>
<% 
Benutzer benutzer = (Benutzer)request.getAttribute("benutzer");


%>
<div class="popup">
<h1>Einstellungen<a class="einstellungen-schliessbutton" href="#" onclick="$('.closer, .popup').fadeOut(300); return false;"><img src="css/img/cross.gif"></a></h1>
       <form id="formBenutzerdatenAendernName" action="BenutzerdatenAendern" method="POST">     
           <table width="100%">
           		
            	<tr>
                	<td width="100" align="right">
                    	Vorname:
                    </td>
                    <td>
                    	<input name="vorname" type="text" style="width:100%" value="<%= benutzer.getVorname() %>">
                    </td>
                </tr>
                <tr>
                	<td align="right">
                    	Nachname:
                    </td>
                    <td>
                    	<input name="nachname" type="text" style="width:100%" value="<%= benutzer.getNachname() %>">
                    </td>
                </tr>
                <tr>
                    <td colspan="100" align="right">
                    	<input type="submit" class="button-input" value="Name ändern" style="display:none;">
                    </td>
                </tr>
                
            </table> 
       </form>
       <form id="formBenutzerdatenAendernEmail" action="BenutzerdatenAendern" method="POST">    
            <table class="maske" style="margin-top:30px" width="100%">
            	<tr>
                	<td width="100" align="right">
                    	E-Mail-Adresse:
                    </td>
                    <td>
                    	<input name="email" type="text" style="width:100%" value="<%= benutzer.getEmail() %>">
                    </td>
                </tr>
                <tr>
                	
                    <td colspan="2" align="right">
                    	<input type="submit" class="button-input" value="E-Mail-Adresse ändern">
                    </td>
                </tr>
                
            </table>
        </form>
        <form id="formBenutzerdatenAendernPw" action="BenutzerdatenAendern" method="POST">     
            <table class="maske" style="margin-top:30px" width="100%">
            	<tr>
                	<td width="100" align="right">
                    	Passwort:
                    </td>
                    <td>
                    	<input name="passwort" type="password" style="width:100%">
                    </td>
                </tr>
                <tr>
                	<td align="right">
                    	Passwort wiederholen:
                    </td>
                    <td>
                    	<input name="passwort2" type="password" style="width:100%">
                    </td>
                </tr>
                <tr>
                	
                    <td colspan="2" align="right">
                    	<input type="submit" class="button-input" value="Passwort ändern">
                    </td>
                </tr>
                
            </table> 
        </form>
        <script>
        $(function() {
        	$('#formBenutzerdatenAendernName .button-input').hide();
            $("#formBenutzerdatenAendernName").submit(function() {
        		$.post("BenutzerdatenAendern", {nachname: $('[name=nachname]').val(), vorname:$('[name=vorname]').val()});
        		$('#formBenutzerdatenAendernName .button-input').css("background-color","#bfddf3").hide(100);
        		return false;
        	});
            $('#formBenutzerdatenAendernName input[name=nachname],#formBenutzerdatenAendernName input[name=vorname]').click(function() {
    			$('#formBenutzerdatenAendernName .button-input').css("background-color","#EEEEEE").show(100);
    		});
            
            $('#formBenutzerdatenAendernEmail .button-input').hide();
            $("#formBenutzerdatenAendernEmail").submit(function() {
            	if(IsEmail($('[name=email]').val())) {
        			$.post("BenutzerdatenAendern", {email: $('[name=email]').val()});
        			$('#formBenutzerdatenAendernEmail .button-input').css("background-color","#bfddf3").hide(100);
        			
            	} else {
            		alert("Bitte gültige E-Mail-Adresse eingeben.");
            	}
        		return false;
        	});
            $('#formBenutzerdatenAendernEmail input[name=email]').click(function() {
				$('#formBenutzerdatenAendernEmail .button-input').css("background-color","#EEEEEE").show(100);
			});
            
            $('#formBenutzerdatenAendernPw .button-input').hide();
            $('#formBenutzerdatenAendernPw input[name=passwort],#formBenutzerdatenAendernPw input[name=passwort2]').click(function() {
				$('#formBenutzerdatenAendernPw .button-input').css("background-color","#EEEEEE").show(100);
			});
            
            $("#formBenutzerdatenAendernPw").submit(function() {
            	if($('#formBenutzerdatenAendernPw input[name=passwort]').val() == $('#formBenutzerdatenAendernPw input[name=passwort2]').val() &&
            			$('#formBenutzerdatenAendernPw input[name=passwort2]').val() != "") {
            		$.post("BenutzerdatenAendern", {pw: $('[name=passwort]').val()});
        			$('#formBenutzerdatenAendernPw .button-input').css("background-color","#bfddf3").hide(100);
        			
        			
            	} else {
            		alert("Passwörter stimmen nicht überein")
            		
            	}
            	return false;
            });
            function IsEmail(email) {
            	  var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            	  return regex.test(email);
            }
        }); 	
        
        </script>
        
</div>       
